import React, { Component } from 'react';
import httpUtil from '../../utils/HttpUtil';
import '../../styles/RankingLabel.scss';
import produce from 'immer';
import { pxToRem, pxToPx,pxToVh } from '../../utils/adaptive.js';
const getColor=(number)=>{
    if(!number||number<0.3){
        return 'orange'
    }else if(number>0.3&&number<0.5){
        return 'yellow'
    }else{
        return 'blue';
    }
}
class ProvincesTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: [
          
            ],
            top: 0,
            status: true
        }
        this.intervaltTimer = null;
        this.timeoutTimer = null;
    }
    componentDidMount() {
        this.setStart();
    }
    componentWillReceiveProps(nextProps) {
        this.setState({
            arr:nextProps.data
        })
    }
    setTableLocation = () => {
        this.intervaltTimer = setInterval(() => {
            let top = this.state.top;
            if (top > -32) {
                top--;
                this.setState({
                    top
                })
            } else {
                clearInterval(this.intervaltTimer);
                this.timer = null;
                let newList = [];
                let list = JSON.parse(JSON.stringify(this.state.arr));
                if(list.length){
                    newList = list.splice(0, 1);
                }
                let arr = list.concat(newList);
                this.setState({
                    arr,
                    top: 0,
                    status: !this.state.status
                });
                this.setStart();

            }
        }, 20)
    }
    setStart = () => {
        this.timeoutTimer = setTimeout(() => {
            this.setTableLocation();
        }, 2000)
    }
    render() {
       const {tag}=this.props;
        return (
            <div className='ranking-label provinces-table' style={{ position: "relative", left: 0, top: 0 }}>
                <p>各省客户总体情况</p>
                <ul className='data-title'>
                    <li>
                        <i className='blue'>
                        </i>
                        <span>
                            50%以上
                        </span>
                    </li>
                    <li>
                        <i className='yellow'>
                        </i>
                        <span>
                            30%-50%
                        </span>
                    </li>
                    <li>
                        <i className='orange'>
                        </i>
                        <span>
                            30%以下
                        </span>
                    </li>
                </ul>
                <div className='ranking-label-Bg'>
                    <div style={{ height: pxToVh(650), border: '1px solid  rgba(74, 174, 255,0.7)', width: pxToRem(595), margin: `${pxToVh(24)}  auto 0` }}>
                        <table style={{ height:  pxToVh(48) }}>
                            <colgroup>
                                <col width={pxToRem(115)}></col>
                                <col width={pxToRem(80)}></col>
                                <col width={pxToRem(80)}></col>
                                <col width={pxToRem(80)}></col>
                                <col width={pxToRem(80)}></col>
                                <col width={pxToRem(80)}></col>
                                <col width={pxToRem(80)}></col>
                            </colgroup>
                            <thead>
                                <tr>
                                    <th className='head' rowSpan='2' >省份</th>
                                    <th className='head' colSpan='2'>三甲</th>
                                    <th className='head' colSpan='2'>三级</th>
                                    <th className='head' colSpan='2'>二级</th>
                                </tr>
                                <tr>
                                    <th className='head table-bottom' >已签约</th>
                                    <th className='head table-bottom' >占比</th>
                                    <th className='head table-bottom' >已签约</th>
                                    <th className='head table-bottom' >占比</th>
                                    <th className='head table-bottom' >已签约</th>
                                    <th className='head table-bottom' >占比</th>
                                </tr>
                            </thead>
                        </table>
                        <div style={{ height: 'calc(100% - '+pxToVh(48)+')', overflow: 'hidden', position: 'relative' }}>
                            <table style={{ position: 'absolute',top:pxToRem(this.state.top)}}>
                                <colgroup>
                                <col width={pxToRem(115)}></col>
                                <col width={pxToRem(80)}></col>
                                <col width={pxToRem(80)}></col>
                                <col width={pxToRem(80)}></col>
                                <col width={pxToRem(80)}></col>
                                <col width={pxToRem(80)}></col>
                                <col width={pxToRem(80)}></col>
                                </colgroup>
                                <tbody>
                                    {
                                        this.state.arr.map((item, i) => {
                                            let name = this.state.status ? '' : 'odd';
                                            if (i % 2 !== 0) {
                                                name = name === '' ? 'odd' : '';
                                            }
                                            return (<tr className={name} key={i}>
                                                 <td>{item.area_name}</td>
                                                 <td>{item.client_cover_other?item.client_cover_other:0}</td>
                                                <td className="alignLeft">
                                                    <i className={getColor(item.percent_other||0)} />
                                                    <span>{Math.round((item.percent_other||0)*100)}%</span>
                                                </td>
                                                 <td>{item.client_cover_level3}</td>
                                                <td className="alignLeft">
                                                    <i className={getColor(item.percent_level3||0)} />
                                                    <span>{Math.round((item.percent_level3||0) *100)}%</span>
                                                </td>
                                                <td>{item.client_cover_level2}</td>
                                                <td className="alignLeft">
                                                    <i className={getColor(item.percent_level2||0)} />
                                                    <span>{Math.round((item.percent_level2||0) *100)}%</span>
                                                </td>
                                            </tr>)
                                        })
                                    }

                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}
export default ProvincesTable;